<!-- 先创建基本的样式 -->
<!-- 
            1. 基本样式

            2. 发送网络请求
            3. 实现这个组件自动聚焦 =》页面dom自动聚焦
                1） ref 
 -->

<template>
   <div class="w-input">
    <div class="w-flex1">
        <input type="text" placeholder="请输入验证码" :value="value" @input="getValue" @blur="blur" ref="inputs">
        <img :src="img" alt="">
    </div>
    <!-- 校验 =》 当这个input 没有内容时，脱标 =》 进行校验 -->
    <div class="pass" v-if="showP">请输入验证码!</div>
   </div>
</template>

<script setup lang="ts">
    import {ref, onMounted } from 'vue';
    import { getverifyd } from '@/http/api/login'

    //   ref 可以获取dom元素 ？？
    // dom操作 

  let inputs = ref()
    onMounted(()=>{
        console.log(inputs.value.focus(),55555);  
        // inputs.value 这个就是 input元素  focus()方法获取光标   
    })

    // 泛型 => 这个方法使用决定数据类型
    let value = ref<number|string>("");

    let img = ref('')
    let verifyN = ref('')

    // 发送网络请求
    const getver = ()=>{
        getverifyd().then((res:any)=>{
            console.log(res);
            img.value = res.src
            verifyN.value = res.datas 
        })
    }
    getver()

    let showP = ref<boolean>();    
    const getValue = (e:any)=>{
        // console.log(e.target.value);
        value.value = e.target.value;  //赋值 
    };

    // 子组件给父组件数据
    let emits = defineEmits(["getPassw"]);
    const blur = ()=>{
        // console.log(55555);
        if( value.value == verifyN.value){
          // 需要校验
            emits("getPassw",true); // 验证通过
        }else{
            emits("getPassw",false);
        }        
    };
</script>

<style scoped lang="scss">
.w-input {
  width: 100%;
  border: 1px solid #c0c4cc;
  padding-left: 10px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 20px;
.w-flex1{
  width: 100%;
  display: flex;

}
  input {
    height: 30px;
    border: none;
    outline: none;
    flex:3;
    line-height: 30px;
    justify-content: center;
    vertical-align: middle;
    padding-left: 5px;
    border-radius: 5px 0 0 5px;
  }
  img {
    flex: 2;
    height: 32px;
    vertical-align: middle;
    border-left: 1px solid #ccc;
    width: 100px;
    border-radius:  0 5px 5px 0;
  }

  .pass {
    position: absolute;
    width: 100%;
    color: red;
    top: 30px;
    left: 0;
  }
}
.w-input:hover {
  border-color: aquamarine;
}
</style>